import CloseIcon from '@/assets/close-1.png';
import ContentBg from '@/assets/draw-fail.png';

import { useState } from 'react';
import { Overlay } from 'react-vant';

export default function useFail() {
  const [visible, setVisible] = useState<boolean>(false);

  function renderNode() {
    return (
      <>
        <Overlay
          zIndex={99}
          visible={visible}
          className=" flex flex-col items-center pt-[200px]"
        >
          <div
            className="w-[646px] h-[1002px] bg-cover relative"
            style={{
              backgroundImage: `url(${ContentBg})`,
            }}
          >
            <button
              onClick={() => setVisible(false)}
              className=" w-8 h-8 bg-cover absolute right-4 -top-8 active:scale-95"
              style={{
                backgroundImage: `url(${CloseIcon})`,
              }}
            />

            {/* <button
              onClick={() => {
                setVisible(false);
              }}
              className="text-[#3fa42b] text-base w-[230px] left-1/2 -ml-[calc(230px/2)] py-2 bg-[rgba(255,255,255,.8)] rounded-lg absolute bottom-12 active:scale-95"
            >
              立刻获取
            </button> */}
          </div>
        </Overlay>
      </>
    );
  }
  return {
    renderNode,
    open: function () {
      setVisible(true);
    },
  };
}
